@extends('layouts.app')

@section('title', '标签列表')

@section('content')
<div class="container py-4">
    <!-- Page Header -->
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="h2 mb-3">文章标签</h1>
            <p class="text-muted">浏览所有文章标签</p>
        </div>
    </div>

    @if($tags->count() > 0)
        <!-- Tag Cloud -->
        <div class="row mb-5">
            <div class="col-12">
                <div class="bg-light p-4 rounded">
                    <h4 class="mb-3">标签云</h4>
                    <div class="tag-cloud">
                        @foreach($tags as $tag)
                            @php
                                $postCount = $tag->posts->count();
                                $fontSize = min(2, max(0.8, 0.8 + ($postCount * 0.1)));
                            @endphp
                            <a href="{{ route('tags.show', $tag->slug) }}" 
                               class="tag-cloud-item me-2 mb-2 d-inline-block" 
                               style="font-size: {{ $fontSize }}rem;">
                                {{ $tag->name }}
                                <span class="badge bg-secondary ms-1">{{ $postCount }}</span>
                            </a>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>

        <!-- Tag List -->
        <div class="row">
            <div class="col-12">
                <h4 class="mb-3">标签列表</h4>
                <div class="row g-3">
                    @foreach($tags as $tag)
                        <div class="col-lg-3 col-md-4 col-sm-6">
                            <div class="card h-100">
                                <div class="card-body text-center">
                                    <h5 class="card-title">
                                        <a href="{{ route('tags.show', $tag->slug) }}" class="text-decoration-none">
                                            {{ $tag->name }}
                                        </a>
                                    </h5>
                                    
                                    @if($tag->description)
                                        <p class="card-text text-muted small">{{ Str::limit($tag->description, 60) }}</p>
                                    @endif
                                    
                                    <div class="mt-auto">
                                        <span class="badge bg-primary">{{ $tag->posts->count() }} 篇文章</span>
                                        <div class="mt-2">
                                            <a href="{{ route('tags.show', $tag->slug) }}" class="btn btn-outline-primary btn-sm">
                                                查看文章
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    @else
        <div class="text-center py-5">
            <h3 class="text-muted">暂无标签</h3>
            <p class="text-muted">还没有创建任何标签</p>
        </div>
    @endif
</div>

@endsection

@push('styles')
<style>
.tag-cloud-item {
    color: #0d6efd;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.2s;
}
.tag-cloud-item:hover {
    background-color: #0d6efd;
    color: white;
    text-decoration: none;
}
.tag-cloud-item:hover .badge {
    background-color: white !important;
    color: #0d6efd !important;
}
</style>
@endpush